import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:zenge_web_flutter/custom/appBar_widget.dart';
import 'package:zenge_web_flutter/custom/custom_products_view.dart';
import 'package:zenge_web_flutter/custom/custom_swiper_control.dart';
import 'package:zenge_web_flutter/custom/custom_widget.dart';
import 'package:zenge_web_flutter/date_base/my_home_date.dart';
import 'package:zenge_web_flutter/view/keep_alive.dart';

import 'state.dart';
import 'package:card_swiper/card_swiper.dart';
Widget buildView(
    MyHomeState state, Dispatch dispatch, ViewService viewService) {
  TextStyle style3 = TextStyle(
    fontSize: 40,
    color: Colors.black,
    fontWeight: FontWeight.bold,
  );
  double screenWidth = 1920;
  double screenHeight = (650 / 1920) * 1920;
  return Scaffold(
    backgroundColor: Colors.white,
    body: Container(
      width: MediaQuery.of(viewService.context).size.width,
      alignment: Alignment.topCenter,
      child: Container(
        width: screenWidth,
        alignment: Alignment.topCenter,
        child: ListView(
          controller: state.scrollController,
          shrinkWrap: true,
          children: [
            Container(
              width: MediaQuery.of(viewService.context).size.width,
              child: Stack(
                children: [
                  Positioned(
                    top: 65,
                    child: Container(
                      width: screenWidth,
                      child: AspectRatio(
                        aspectRatio: 1920 / 750, //设置子组件宽高比，防止变形
                        child: Swiper(
                          itemBuilder: (BuildContext context, int index) {
                            return new Image.network(
                              imgList[index]["url"],
                              fit: BoxFit.fill,
                            );
                          },
                          itemCount: imgList.length,
                          loop: true,
                          autoplay: true,
                          control: new CustomSwiperControl(color: Colors.grey),
                          pagination: new SwiperPagination(
                              builder: DotSwiperPaginationBuilder(
                                  color: Colors.white,
                                  activeColor: Colors.grey,
                                  size: 20,
                                  activeSize: 18)),
                          scrollDirection: Axis.horizontal, //滚动方向横向
                        ),
                      ),
                    ),
                  ),
                  AppBarWidget(
                    boxHeight: 750,
                  ),
                ],
              ),
            ),
            Stack(
              children: [
                ImageWidget(
                  width: screenWidth,
                  height: 720 / 1920 * screenWidth,
                  imageUrl:
                      'http://nwzimg.wezhan.hk/contents/sitefiles3603/18018508/images/2395642.jpg',
                ),
                Positioned(
                    top: screenWidth / 40,
                    left: screenWidth / 5,
                    child: Container(
                      width: 500,
                      child: SelectableText(
                        '已支持多款语音控制设备',
                        style: style3,
                      ),
                    )),
                Positioned(
                  top: screenWidth / 12,
                  left: screenWidth / 5,
                  child: Container(
                    width: screenWidth * 2 / 3,
                    child: SelectableText(
                      '已支持多款语音控制设备支持天猫精灵、小度音箱、小爱音箱、京东叮咚、Google Home、Amazon Alexa等主流语音控制设备',
                      style: TextStyle(fontSize: 18, color: Colors.black),
                    ),
                  ),
                ),
              ],
            ),
            Stack(
              children: [
                ImageWidget(
                  width: screenWidth,
                  height: 650 / 1920 * screenWidth,
                  imageUrl:
                      'http://nwzimg.wezhan.hk/contents/sitefiles3603/18018508/images/2154298.jpg',
                ),
                Positioned(
                  left: (1920 - 250) / 2,
                  top: 40,
                  child: Container(
                    width: 250,
                    child: SelectableText(
                      "征极智能生态",
                      style: TextStyle(
                        fontSize: 40,
                        color: Colors.white,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ),
                Positioned(
                  top: 100,
                  left: (1920 - (1920 / 20)) / 2,
                  child: Container(
                    height: 5,
                    margin: EdgeInsets.symmetric(vertical: 10),
                    width: screenWidth / 20,
                    color: Colors.blue,
                  ),
                ),
                Positioned(
                  top: 120,
                  left: (1920 - (1920 / 3)) / 2,
                  child: Container(
                    width: screenWidth / 3,
                    child: SelectableText(
                      "我们坚持站在客户的角度思考问题，不断提升产品竞争力，为客户拓展全球市场，增加客户渠道在市场占有率",
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        fontSize: 16,
                        color: Colors.white,
                      ),
                    ),
                  ),
                ),
                TextCenter(
                  left: (450 / 1920) * screenWidth,
                  top: (319 / 650) * screenHeight,
                  text01: "原厂",
                  text02: "供货",
                ),
                TextCenter(
                  left: (690 / 1920) * screenWidth,
                  top: (319 / 650) * screenHeight,
                  text01: "出货",
                  text02: "渠道",
                ),
                TextCenter(
                  left: (932 / 1920) * screenWidth,
                  top: (319 / 650) * screenHeight,
                  text01: "认证",
                  text02: "齐全",
                ),
                TextCenter(
                  left: (1174 / 1920) * screenWidth,
                  top: (319 / 650) * screenHeight,
                  text01: "专业",
                  text02: "开发",
                ),
                TextCenter(
                  left: (1417 / 1920) * screenWidth,
                  top: (319 / 650) * screenHeight,
                  text01: "生态",
                  text02: "伙伴",
                ),
                TextPosition(
                  left: ((450 - 70) / 1920) * screenWidth,
                  top: (449 / 650) * screenHeight,
                  text: '高性价比且稳固的产品核心竞争力',
                  width: 170,
                ),
                TextPosition(
                  left: ((690 - 70) / 1920) * screenWidth,
                  top: (449 / 650) * screenHeight,
                  text: '为客户供应优质的智能产品走向世界',
                  width: 175,
                ),
                TextPosition(
                  left: ((930 - 70) / 1920) * screenWidth,
                  top: (449 / 650) * screenHeight,
                  text: '全球认证齐全如：FCC/CE/ROHS/UL等',
                  width: 165,
                ),
                TextPosition(
                  left: ((1174 - 70) / 1920) * screenWidth,
                  top: (449 / 650) * screenHeight,
                  text: '软硬件开发、工业设计、包装设计、营销推广',
                  width: 200,
                ),
                TextPosition(
                  left: ((1417 - 70) / 1920) * screenWidth,
                  top: (449 / 650) * screenHeight,
                  text: '搭载第三方服务平台，实现智能生态互联、资源互动',
                  width: 220,
                ),
              ],
            ),
            Container(
              width: 1920,
              height: 920,
              child: Stack(
                children: [
                  Positioned(
                      top: 260,
                      left: 300,
                      child: ProductsView(
                        width: 280,
                        image01:
                            'http://nwzimg.wezhan.hk/contents/sitefiles3603/18018508/images/2252742.jpg',
                        image02:
                            'http://nwzimg.wezhan.hk/contents/sitefiles3603/18018508/images/2252742.jpg',
                        text: '智能照明产品',
                      )),
                  Positioned(
                      top: 260,
                      left: 300 + 280 + ((screenWidth - 1120 - 600) / 3),
                      child: ProductsView(
                        width: 280,
                        image01:
                            'http://nwzimg.wezhan.hk/contents/sitefiles3603/18018508/images/2155019.jpg',
                        image02:
                            'http://nwzimg.wezhan.hk/contents/sitefiles3603/18018508/images/2155019.jpg',
                        text: 'LED灯带控制器',
                      )),
                  Positioned(
                      top: 260,
                      left: 300 + (280 + ((screenWidth - 1120 - 600) / 3)) * 2,
                      child: ProductsView(
                        width: 280,
                        image01:
                            'http://nwzimg.wezhan.hk/contents/sitefiles3603/18018508/images/2155017.jpg',
                        image02:
                            'http://nwzimg.wezhan.hk/contents/sitefiles3603/18018508/images/2155017.jpg',
                        text: '智能模块驱动',
                      )),
                  Positioned(
                      top: 260,
                      left: 300 + (280 + ((screenWidth - 1120 - 600) / 3)) * 3,
                      child: ProductsView(
                        width: 280,
                        image01:
                            'http://nwzimg.wezhan.hk/contents/sitefiles3603/18018508/images/2155020.jpg',
                        image02:
                            'http://nwzimg.wezhan.hk/contents/sitefiles3603/18018508/images/2155020.jpg',
                        text: '智能照明产品',
                      )),
                  Positioned(
                      left: (screenWidth - 300) / 2,
                      top: 70,
                      child: Container(
                          width: 300,
                          alignment: Alignment.center,
                          child: SelectableText('征极智能产品', style: style3))),
                  Positioned(
                    left: (screenWidth - screenWidth / 20) / 2,
                    top: 130,
                    child: Container(
                      height: 5,
                      alignment: Alignment.center,
                      width: screenWidth / 20,
                      color: Colors.blue,
                    ),
                  ),
                ],
              ),
            ),
            Container(
              child: Stack(
                children: [
                  ImageWidget(
                    width: screenWidth,
                    height: 560 / 1920 * screenWidth,
                    imageUrl:
                        'http://nwzimg.wezhan.hk/contents/sitefiles3603/18018508/images/2155758.jpg',
                  ),
                  Positioned(
                    top: 40,
                    left: (screenWidth - screenWidth / 3) / 2,
                    child: Container(
                      width: screenWidth / 3,
                      child: SelectableText(
                        "领先的技术实力与创新的开发模式产品远销至世界各地",
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          fontSize: 40,
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
            Container(
              width: 1920,
              height: 590 / 1920 * screenWidth,
              child: Stack(
                children: [
                  Positioned(
                      top: 260,
                      left: 300,
                      child: Container(
                          width: 340,
                          height: 210,
                          child: Image.network(
                            'http://nwzimg.wezhan.hk/contents/sitefiles3603/18018508/images/2102327.jpg',
                            fit: BoxFit.fill,
                          ))),
                  Positioned(
                      top: 260,
                      left: 300 + 340 + (screenWidth - 1020 - 600) / 2,
                      child: Container(
                          width: 340,
                          height: 210,
                          child: Image.network(
                            'http://nwzimg.wezhan.hk/contents/sitefiles3603/18018508/images/2102397.jpg',
                            fit: BoxFit.fill,
                          ))),
                  Positioned(
                      top: 260,
                      left: 300 + (340 + (screenWidth - 1020 - 600) / 2) * 2,
                      child: Container(
                          width: 340,
                          height: 210,
                          child: Image.network(
                            'http://nwzimg.wezhan.hk/contents/sitefiles3603/18018508/images/2102398.jpg',
                            fit: BoxFit.fill,
                          ))),
                  Positioned(
                      left: (screenWidth - 300) / 2,
                      top: 70,
                      child: Container(
                          width: 300,
                          alignment: Alignment.center,
                          child: SelectableText('征极的合作模式', style: style3))),
                  Positioned(
                    left: (screenWidth - screenWidth / 20) / 2,
                    top: 130,
                    child: Container(
                      height: 5,
                      alignment: Alignment.center,
                      width: screenWidth / 20,
                      color: Colors.blue,
                    ),
                  ),
                ],
              ),
            ),
            Stack(
              alignment: Alignment.center,
              children: [
                ImageWidget(
                  width: screenWidth,
                  height: 700,
                  imageUrl:
                      'http://nwzimg.wezhan.hk/contents/sitefiles3603/18018508/images/2021422.jpg',
                ),
                Positioned(
                  top: 150,
                  left: (screenWidth - screenWidth * 2 / 3) / 2,
                  child: Container(
                      height: screenWidth / 5,
                      width: screenWidth * 2 / 3,
                      child: ListView.builder(
                          itemCount: imgList4.length,
                          controller: state.controller,
                          scrollDirection: Axis.horizontal,
                          itemBuilder: (BuildContext context, int index) {
                            return Container(
                                width: screenWidth / 5,
                                height: screenWidth / 5,
                                margin: EdgeInsets.symmetric(
                                    horizontal: 10, vertical: 10),
                                child: Card(
                                    child:
                                        Image.network(imgList4[index]['url'])));
                          })),
                ),
                Positioned(
                    top: screenWidth / 40,
                    left: 0,
                    child: Container(
                      width: screenWidth,
                      alignment: Alignment.center,
                      child: SelectableText(
                        'OUR TEAM',
                        style: style3,
                      ),
                    )),
                Positioned(
                  top: screenWidth / 16,
                  left: 0,
                  child: Container(
                    width: screenWidth,
                    alignment: Alignment.center,
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Container(
                          width: screenWidth / 15,
                          height: 1,
                          color: Colors.grey[400],
                        ),
                        Container(
                            width: 150,
                            margin: EdgeInsets.symmetric(horizontal: 20),
                            child: SelectableText(
                              '我们的团队',
                              style: TextStyle(
                                  fontSize: 20,
                                  fontWeight: FontWeight.bold,
                                  color: Colors.orange),
                            )),
                        Container(
                          width: screenWidth / 15,
                          height: 1,
                          color: Colors.grey[400],
                        )
                      ],
                    ),
                  ),
                ),
              ],
            ),
            Container(
              width: MediaQuery.of(viewService.context).size.width,
              height: 1400,
              constraints: BoxConstraints(
                maxWidth: 1920,
                maxHeight: 1400,
              ),
              child: Stack(
                alignment: Alignment.center,
                children: [
                  Positioned(
                    top: 150,
                    left: (screenWidth - screenWidth * 2 / 3) / 2,
                    child: Container(
                      width: screenWidth * 2 / 3,
                      height: 1200,
                      child: Image.network(
                        'http://nwzimg.wezhan.hk/contents/sitefiles3603/18018508/images/2218431.jpg',
                        fit: BoxFit.fill,
                      ),
                    ),
                  ),
                  Positioned(
                      left: (screenWidth - 300) / 2,
                      top: 70,
                      child: Container(
                          width: 300,
                          alignment: Alignment.center,
                          child: SelectableText('征极的荣誉证书', style: style3))),
                  Positioned(
                    left: (screenWidth - screenWidth / 20) / 2,
                    top: 130,
                    child: Container(
                      height: 5,
                      alignment: Alignment.center,
                      width: screenWidth / 20,
                      color: Colors.blue,
                    ),
                  ),
                ],
              ),
            ),
            KeepAliveWidget(viewService.buildComponent("bottom_info")),
          ],
        ),
      ),
    ),
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.white,
        onPressed: () {
          // scrollController 通过 animateTo 方法滚动到某个具体高度
          // duration 表示动画的时长，curve 表示动画的运行方式，flutter 在 Curves 提供了许多方式
          state.scrollController.animateTo(0.0,
              duration: Duration(milliseconds: 500),
              curve: Curves.decelerate);
        },
        child: Icon(Icons.arrow_upward_sharp,color: Colors.grey,size: 40,),
      )
  );
}

class TextPosition extends StatefulWidget {
  final double top;
  final double left;
  final String text;
  final double width;

  TextPosition({Key key, this.top, this.left, this.text, this.width = 200})
      : super(key: key);

  @override
  _TextPositionState createState() => _TextPositionState();
}

class _TextPositionState extends State<TextPosition> {
  @override
  Widget build(BuildContext context) {
    return Positioned(
        top: widget.top,
        left: widget.left,
        child: Container(
          width: widget.width,
          alignment: Alignment.center,
          child: Text(
            widget.text,
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 18, color: Colors.white),
          ),
        ));
  }
}
